<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
    <div class="flex justify-center">
      <div class="container-width">
        <div class="main">
          <div>
            <div class="xinxizixun mt-8 ">
              园企对接
            </div>
            <div class="sousuo mt-2 flex justify-between">
              <div class="sousuotext">
                全国1300+园区详情，随需调用
              </div>
              <div class="sousuoinput flex flex-row">
                <div class="inputlable">
                  <el-select v-model="queryList.queryOption" placeholder="全站搜索">
                    <el-option
                      v-for="item in QueryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="inputcontent">
                  <el-input v-model="queryList.yuanquname" placeholder="搜索园区"></el-input>
                </div>
                <div class="sousuobutton" @click="handleFilter" style="cursor: pointer;">
                  搜索
                </div>
              </div>

            </div>
            <div class="flex flex-row">
              <div style="width:593px;" class="flex-1 flex flex-col">
                <div class=" flex justify-between py-4">
                  <div class="fuhenum">
                    共有符合条件的项目 <span>{{total}} </span>条
                  </div>
                  <!-- <div class="fabutime">
                    <div>发布时间</div>
                      <div class="fabutimeIcon">
                        <i class="el-icon-s-fold"></i>
                      </div>
                  </div> -->
                </div>
                <div class="p-4 bg-[#FFFFFF]">
                  <div v-for="(item, index) in dockingList" :key="index" class="bg-[#FFFFFF] contentitem mb-2.5 flex flex-row" @click="goToDetailView(item.id)" style="cursor: pointer;">
                    <div class="tupian" style="width:208px;height:111px;">
                      <img class="w-[208px] h-[111px]" :src="item.pictureurl" >
                    </div>
                    <div class="flex-1 neirong" style="margin-left:11px;">
                      <div class="neirongtitle" style="font-size: 13px;font-weight: 600;color: #000000;">
                        {{item.name}}
                      </div>
                      <div class="neirongtime neirongtimeNew" style="margin-top:8px;font-size: 10px;font-weight: 400;color: #9C9C9C;">
                        <div class="neirongicon1"><i class="el-icon-time"></i></div>
                        <div style="overflow: hidden;white-space: nowrap;width: 68px;">{{item.createTime}}</div>
                        <div class="neirongicon2"><i class="el-icon-view"></i></div>
                        <div>{{item.liulannum}}</div>
                      </div>
                      <div style="margin-top:8px;font-size:10px;" class="text-[#9C9C9C] neirongdetail break-normal overflow-hidden" v-html="setContent(item.content)">
                        
                      </div>
                    </div>
                  </div>
                  <pagination v-show="total>0" :total="total" :page.sync="queryList.pageNum" :limit.sync="queryList.pageSize" @pagination="getList" />
                </div>
              </div>
              <div class="duijie" style="position: relative;" id="createParkForm">
                <div class="duijieitem p-4" :class="whether ? 'isFixed' : ''">
                  <div class="duijiexiangmu mb-3">
                    <div class="duijiexiangmuLine"></div>
                    <div class="duijiexiangmuText">创建我的园区</div>
                  </div>
                  <el-form ref="dataForm" :model="form" label-width="0px">
                    <el-form-item label="">
                      <el-radio v-model="form.type" label="1">园区登记</el-radio>
                      <el-radio v-model="form.type" label="2">项目登记</el-radio>
                      <el-radio v-model="form.type" label="3">其他</el-radio>
                    </el-form-item>
                    <el-form-item label="">
                      <el-input
                        placeholder="姓名"
                        v-model="form.name">
                        <i slot="prefix" class="el-input__icon el-icon-user"></i>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-input
                        placeholder="电话（必填）"
                        v-model="form.mobile">
                        <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
                      </el-input>
                    </el-form-item>
                  </el-form>
                  <a href="#" class="fasong" @click="addContact" style="cursor: pointer;">
                    发送
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchDockingList } from '@/api/docking'
import { createContact } from '@/api/contact'
import NavBar from "@/components/NavBar.vue"
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
	name: 'ProjectDockingView',
  components: {
    Pagination,
    NavBar
  },
  data() {
    return {
      whether: false,
      dockingList: [],
      form: {
        type: "1",
        name: '',
        mobile: '',
        duijiefenlei:2
      },
      total: 0,
      QueryOptions: [{
        value: 0,
        label: '全站搜索'
      }],
      queryList: {
        pageNum: 1,
        pageSize: 10,
        queryOption: 0,
        yuanquname: ''
      }
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    getList() {
      fetchDockingList(this.queryList).then(response => {
        this.total = response.total
        this.dockingList = response.data
      })
    },
    addContact() {
      createContact(this.form).then(response => {
        if (response.result === 1) {
          this.form = {
            type: "1",
            name: '',
            mobile: '',
        duijiefenlei:2
          }
          this.$notify({
            title: '成功',
            message: response.msg,
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '错误',
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    goToDetailView(id) {
      this.$router.push({ name: 'project-docking-detail', params: { id: id }})
    },
    setContent(value) {
      const imgReg = /<img.*?(?:>|\/>)/gi;//定义正则表达式（拿到img标签所有值）
      const deArray  = value.match(imgReg);//使用正则表达式，拿到的是数组
      //["<img src="images/01.gif">", "<img src="images/02.gif">"]
      if (deArray != null && deArray != undefined) {
        deArray.forEach(element => {
          value = value.replace(element, "") //放在循环中剔除img标签
        })
      }
      value = value.replace(/<\/?.+?\/?>/g, '');
      if (!value) return "";
      if (value.length > 80) {
        return value.slice(0, 80) + "...";
      }
      return value
    },
    handleFilter() {
      this.getList()
    },
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('#createParkForm').offsetTop
      this.whether = scrollTop > offsetTop
    }
  }
}
</script>

<style lang="scss" scoped>
.isFixed {
  position: sticky;
  top: 50px;
  z-index: 600;
}
.contain {
  display: flex;
  justify-content: space-between;
}

.main {}

.main .xinxizixun {
  width: 8.625rem;
  height: 2.625rem;
  font-size: 1.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  line-height: 2.625rem;
  letter-spacing: 0.125rem;
}

/* sousuo开始 */
.main .sousuo {
  align-items: baseline;
}

.main .sousuo .sousuotext {
  width: 15.875rem;
  height: 1.25rem;
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  line-height: 1.25rem;
}

.main .sousuo .sousuoinput {
  margin-left: 4.375rem;
  width: 34.9375rem;
  height: 2.375rem;
  background: #FFFFFF;
  position: relative;
}

.main .sousuo .sousuoinput .inputlable {
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #5D6069;
  line-height: 1.25rem;
  border-right: 0.0625rem solid #EFEFEF;

  .el-select {
    ::v-deep .el-input {
      .el-input__inner {
        width: 122px;
        border: 0;
      }
    }
  }
}

.main .sousuo .sousuoinput .inputcontent {
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #CBCDD1;
  line-height: 1.25rem;

  .el-input {
    ::v-deep .el-input__inner {
      border: 0;
    }
  }
}

.main .sousuo .sousuoinput .inputcontent input {
  width: 21.875rem;
}

.main .sousuo .sousuoinput .sousuobutton {
  background: #FE7743;
  font-size: 0.625rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.875rem;
  padding: 0.4375rem 0.6875rem;
  margin: 0.3125rem;
  position: absolute;
  top: 0;
  right: 0;
}

/* sousuo结束 */



.fuhenum {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9C9C9C;
}

.fuhenum span {
  color: #FF5F00;
}

.fabutime {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #FE7743;
  display: flex;
}

.fabutimeIcon{
  margin-left: 0.4rem;
}

/* fuhetiaojian结束 */


.content {
  padding-right: 1.0625rem;
  padding-bottom: 1.25rem;
  background: #FFFFFF;
}

.content .contentitem {
  padding-top: 1.0625rem;
  margin-left: 1.0625rem;
}

.content .contentitem .tupian {
  width: 13rem;
  height: 6.9375rem;
}

.content .contentitem .neirong {
  margin-left: 0.6875rem;
}

.content .contentitem .neirong .neirongtitle {
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  overflow: hidden;
}

.content .contentitem .neirong .neirongtime {
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  margin-top: 0.5rem;
}

.neirongtimeNew{
  display: flex;
  .neirongicon1{
    margin-right: 0.4rem;
  }
  .neirongicon2{
    margin-left: 1rem;
    margin-right: 0.4rem;
  }
}

.content .contentitem .neirong .neirongdetail {
  width: 21.1875rem;
  height: 56px;
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #9C9C9C;
  margin-top: 0.5rem;
}

/* duijie开始 */
.duijie {
  margin-top: 20px;
}
.duijie .duijieitem {
  width: 17.875rem;
  height: 19.125rem;
  margin-top: 1.875rem;
  margin-left: 1.3125rem;
  margin-bottom: 1.25rem;
  background: #FFFFFF;
}

.duijie .duijiexiangmu {
  font-size: 1.25rem;
  font-weight: 600;
  color: #000000;
  letter-spacing: 0.0625rem;
  display: flex;
}

.duijie .duijiexiangmu .duijiexiangmuLine {
  min-width: 0.3rem;
  background-color: rgba(254, 119, 67, 1);
}

.duijie .duijiexiangmu .duijiexiangmuText {
  margin-left: 1rem;
}

.duijie .xingming {
  width: 14rem;
  height: 2.75rem;
  line-height: 2.75rem;
  background: #F9FAF9;
  border-radius: 4px;
  margin-top: 1.1875rem;
  margin-left: 2.0625rem;
  padding-left: 0.625rem;

}


.duijie .fasong {
  width: 100%;
  height: 44px;
  line-height: 2.75rem;
  background: #FE7743;
  border-radius: 4px;
  margin-top: 1.1875rem;
  text-align: center;
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FFFFFF;
  display: block;
}
</style>